﻿<div class="page">
    @*<header class="bar bar-nav">
            <h1 class="title">Login</h1>
        </header>*@
    <div class="content" style="margin-top: 1rem;">
        <div class="text-center">
            <i class="fa fa-windows logo"></i>
            <div class="title" style="margin-top: .5rem;">
                道路运输安全管理<br>两类人考试培训平台
            </div>
        </div>
        <div class="page-login">
            <div class="list-block inset text-center">
                <ul>
                    <li>
                        <div class="item-content">
                            <div class="item-media">
                                <i class="icon icon-form-name"></i>
                            </div>
                            <div class="item-inner">
                                <div class="item-input">
                                    <input type="text" name="username" id="username" placeholder="请输入身份证号码/手机号码">
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="item-content">
                            <div class="item-media">
                                <i class="icon icon-form-email"></i>
                            </div>
                            <div class="item-inner">
                                <div class="item-input">
                                    <input type="password" name="password" id="password" placeholder="请输入密码">
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="content-block">
                <p>
                    <a id="btnLogin" class="button button-big button-fill external" data-transition='fade'>登 录</a>
                </p>
            </div>
        </div>

    </div>
</div>

@section css{
    <style>
        .content {
            color: #999;
        }

        .button.button-fill.button-big {
            line-height: 2.0rem;
            height: 2.0rem;
        }

        .title {
            color: white;
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 40px;
        }

        .logo {
            color: white;
            font-size: 3rem;
        }

        .list-block {
            margin: .75rem;
        }

        .content-block {
            margin: .75rem 0;
        }

        .signup a {
            color: #999;
        }

        .page-login {
            margin-top: 5.5rem;
        }

            .page-login .signup {
                font-size: 0.7rem;
            }

            .page-login .leader {
                margin: 3rem 0 1rem 0;
                padding: 0.5rem 0;
                font-size: 0.7rem;
                border-top: 1px dashed #ccc;
                color: #999;
            }

                .page-login .leader:after {
                    left: auto;
                    right: 1rem;
                }

            .page-login .others {
                text-align: center;
            }

            .page-login i.icon-form-name {
                background: url(http://gtms01.alicdn.com/tps/i1/TB1pN89IFXXXXaPXpXX8wnlGFXX-42-46.png) no-repeat;
                background-size: 21px 23px;
                background-position: 5px 7px;
            }

            .page-login i.icon-form-email {
                background: url(http://gtms04.alicdn.com/tps/i4/TB1An8TIFXXXXapXVXXlg00GFXX-38-46.png) no-repeat;
                background-size: 19px 23px;
                background-position: 6px 1px;
            }
    </style>
}
@section js{
    @Html.CdnImport("~/lib/useragent/useragent_base.js")
    @Html.CdnImport("~/lib/useragent/useragent.js")
    @Html.CdnImport("~/fx.js")
    <script type="text/javascript">
        $(function () {
            $('#btnLogin').click(function () {
                if ($('#username').val() == '' || $('#username').val() == '身份证号码/手机号码') {
                    $.toast('请填写：身份证号码 / 手机号码');
                    $('#username').focus();
                }
                else if ($('#password').val() == '') {
                    $.toast('请填写密码！');
                    $('#password').focus();
                }
                else {
                    $.showPreloader('正在登录...');
                    $.post('/default/login',
                        {
                            account: $('#username').val(),
                            password: $('#password').val(),
                            browser: fx.getBrowser(),
                            device: fx.getDevice(),
                            os: fx.getOS()
                        },
                        function (result) {
                            if (result.success) {
                                window.location.href = result.url;
                            } else {
                                $.hidePreloader();
                                $.alert(result.message);
                            }
                        });
                }
            });

            $('.page').css('background', 'url(/www/img/1.jpg)').css('background-size','cover');
        });
    </script>
}